<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: cyan;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <script>
      /*
        0级事件: on + 事件名 = 事件函数;
        1级事件: 没有定版本
        2级事件: 元素.addEventListener("事件名",事件函数)
        3级事件: focus blue .... ....
        */

      //一.通过 on + 事件名称绑定事件
      //var boxEle = document.querySelector(".box");
      //   boxEle.onclick = function () {
      //     console.log(111);
      //   };
      //   fn = function () {
      //     console.log(111);
      //   };
      //   boxEle.onclick = fn;

      //解除绑定事件
      //   boxEle.onclick = null;

      //
      //二.2级事件绑定: 元素.addEventListener("事件名",事件函数)
      // var boxEle = document.querySelector(".box");
      // //   boxEle.addEventListener("click", function () {
      // //     console.log(111);
      // //   });
      // var fn = function () {
      //   console.log(111);
      // };
      // boxEle.addEventListener("click", fn);

      // //解除事件的绑定
      // boxEle.removeEventListener("click", fn);
      // var obj1 = {
      //   name: "张三",
      // };
      // var obj2 = {
      //   name: "张三",
      // };
      // var obj1 = obj2;
      // console.log(obj1 === obj2);

      //三.0级事件和2级事件的区别:
      //针对于多个事件的绑定 0级事件会覆盖  : 2级事件会累加
      // var boxELe = document.querySelector(".box");
      // var fn = function () {
      //   console.log(111);
      // };
      // var fn2 = function () {
      //   console.log(222);
      // };
      // // boxELe.onclick = fn;
      // // boxELe.onclick = fn2;

      // //观察者模式
      // boxELe.addEventListener("click", fn);
      // boxELe.addEventListener("click", fn2);
      // boxELe.removeEventListener("click", fn);

      //四.2级事件的兼容性
      // var boxELe = document.querySelector(".box");
      //boxELe.addEventListener()//主流浏览器

      //IE8及以下
      document.attachEvent("onclick", function () {
        console.log("触发了");
      });

      //兼容性绑定事件的方法
      // function addEvent(ele, eventName, fn) {
      //   if (window.addEventListener) {
      //     //主流浏览器
      //     ele.addEventListener(eventName, fn);
      //   } else {
      //     //IE8及以下
      //     ele.attachEvent("on" + eventName, fn);
      //   }
      // }
    </script>
  </body>
</html>
